<template>
    <div class="mainContent">
        <div class="search">
            <el-button v-preventReClick="1500" type="primary" @click="setData(1)" style="border-radius: 2px;padding:10px 25px;">+ 配置</el-button>
        </div>
        <div class="tabBox">
            <div class="tableList">
                <el-table :data="list" :stripe="true" :height="tableHeight">
                    <el-table-column  label="项目名称">
                        <template slot-scope="scope">
                            {{scope.row.company | deptNameFilter(deptList)}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="首页系统名称" width="200px">
                        <template slot-scope="scope">
                            <Tooltip transfer :content="scope.row.name ? scope.row.name : '—'" placement="top-start" max-width='300'>
                                <p style="width:280px;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;cursor: pointer;">
                                    {{ scope.row.name ? scope.row.name : '—' }}
                                </p>
                            </Tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column prop="titleLogo" label="首页logo" align="center">
                        <template slot-scope="scope">
                            <el-image v-if="scope.row.titleLogo" style="width: 50px;height: 50px;border-radius: 50%" fit="contain" :src="scope.row.titleLogo" :preview-src-list="[scope.row.titleLogo]"></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column prop="time" label="操作" width="100">
                        <template slot-scope="scope">
                            <el-button @click="setData(2,scope.row)" type="text" size="small" v-preventReClick="1500" style="color:#1891FF;">编辑</el-button>
                            <el-button @click="removeRow(scope.row.skinId)" type="text" size="small" v-preventReClick="1500" style="color:red;">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="clearfix" v-show="list.length>0">
                <div class="float-right">
                    <Page
                        v-if="totalCount"
                        style="margin: 20px 0;text-align: center;"
                        :current.sync="pageNum"
                        :total="totalCount"
                        :page-size="pageSize"
                        show-elevator
                        show-total @on-change="pageChange">
                    </Page>
                </div>
            </div>
        </div>

        <Modal v-model="modal" :title="isAdd ? '添加配置' : '编辑配置'" width="500px" :mask-closable="false" class-name='addModal'>
            <div class="addMsg">
                <el-form :model="skinForm" :rules="rules" ref="skinForm" label-width="130px">
                    <div class="title">
                        <h2>
                            <span class="bc"></span>
                            <span>基本信息</span>
                        </h2>
                    </div>
                    <el-form-item label="项目:" prop="company">
                        <el-select v-model="skinForm.company" placeholder="请选择项目" :disabled="!isAdd">
                            <el-option v-for="item in deptList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="机械云管家别名:" prop="ext1">
                        <el-input v-model="skinForm.ext1" placeholder="请输入"></el-input>
                    </el-form-item>
                    <div class="title">
                        <h2>
                            <span class="bc"></span>
                            <span>首页</span>
                        </h2>
                    </div>
                    <el-form-item label="系统名称:" prop="name">
                        <el-input v-model="skinForm.name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="logo:" prop="titleLogo">
                        <el-upload
                            name="img"
                            class="avatar-uploader"
                            :disabled="!!skinForm.titleLogo"
                            :headers="headers"
                            :action="$axios.defaults.baseURL+'/ms/api/sys/skin/img'"
                            :show-file-list="false"
                            :on-success="uploadSuccess"
                            :before-upload="beforeAvatarUpload">
                            <img v-if="skinForm.titleLogo" :src="skinForm.titleLogo" class="avatar" />
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            <div v-if="skinForm.titleLogo" class="item_close" @click.stop="handleRemove(0)">
                                <Icon type="ios-close-circle" style="color:red;font-size:20px;"/>
                            </div>
                        </el-upload>
                    </el-form-item>
                    <div class="title">
                        <h2>
                            <span class="bc"></span>
                            <span>主题色</span>
                        </h2>
                    </div>
                    <el-form-item label="主题色编码:" prop="style">
                        <el-input v-model="skinForm.style" placeholder="请输入"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="主题色:" prop="skinColor">
                        <el-input v-model="skinForm.skinColor"></el-input>
                    </el-form-item> -->
                </el-form>
            </div>
            <div slot="footer">
                <el-button
                    @click="close"
                    style="padding:7px 25px;border-radius: 15px;background:rgba(46, 104, 253, 0.16);border:1px solid rgba(46, 104, 253, 0.16);"
                    type="info" size="mini">
                    <span style="color:#1891FF;">取消</span>
                </el-button>
                <el-button
                    @click="submitAll"
                    type="primary"
                    style="padding:7px 25px;border-radius: 15px;background:#1891FF;border:1px solid #1891FF;"
                    size="mini"
                    v-preventReClick="1500">
                    <span style="color:#fff;">确定</span>
                </el-button>
            </div>
        </Modal>

        <delModal :delModal="delModal" :delId="delId" :setDelFn="getSysSkinDel" @handleDelClose="handleDelClose" @handleDelSubmit="handleDelSubmit"></delModal>
    </div>
</template>
<script>
import { getSysSkinAdd, getSysSkinEdit, getSysSkinList, getSysSkinDel } from "@/api/sys.js";
import { getAlldeptList } from "@/api/api.js";
import delModal from "../delModal";

export default {
    components: {delModal},
    data() {
        return {
            headers: {
                Authorization:localStorage.getItem('COOKIE'),
            },
            keyword: "",
            pageNum: 1,
            pageSize: 10,
            totalCount: "",
            list: [],
            isAdd: true,// 添加 or 编辑节流
            modal: false, //添加 or 编辑弹窗
            maxlength: 32,//文字长度

            delId: '',//删除ID
            getSysSkinDel,//删除函数
            delModal: false,//删除弹窗

            deptList: [],
            skinForm: {},
            rules: {
                company: [
                    { required: true, message: '请选择公司', trigger: 'change' }
                ],
                ext1: [
                    { required: true, message: '请输入机械云管家别名', trigger: 'blur' }
                ]
            },


            skinId: '',//id
            host: '',//域名
            company: '',//公司名称
            title: '',//标题
            name: '',//名称
            style: '',//样式
            titleLogo: "",//登录页logo
            logo: "",//首页logo
            extList: [
                {
                    ext: '',
                },
                {
                    ext: '',
                },
                {
                    ext: '',
                },
                {
                    ext: '',
                },
            ],//扩展字段
            tableHeight: window.innerHeight - 315,
        };
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        }
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId;
                this.deptName = val.name;
                this.pageNum = 1;
                this.keyword = "";
                this.getSysSkinListFn();
            }
        }
    },
    methods: {
        /* 获取组织架构 */
        getDeptList(){
            getAlldeptList().then(res=>{
                let arr = res.data.list[0].children
                this.deptList = []
                this.getDept(arr)
            })
        },

        /* 递归查找项目 */
        getDept(list){
            list.forEach(element => {
                if(element.type===1){
                    this.deptList.push(element)
                }
                if(element.children){
                    this.getDept(element.children)
                }
            })
        },

        /* 选择组织 */
        deptChange(val){
            debugger
        },

        /* 上传前 */
        beforeAvatarUpload(file) {
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                this.$Message.error("logo图片大小不能超过 2M!");
                return false
            }
            return;
        },

        /* 上传成功 */
        uploadSuccess(res){
            this.$set(this.skinForm, 'titleLogo', res.data.path)
            this.$Message.success("上传成功");
        },

        /* 删除logo */
        handleRemove(){
            this.skinForm.titleLogo = ""
        },
        
        removeRow(removeId) {
            this.delId = String(removeId);
            this.delModal = true;
        },
        handleDelSubmit(delModal) {
            this.delModal = delModal;
            this.pageNum = 1;
            this.getSysSkinListFn();
        },
        handleDelClose(delModal) {
            this.delModal = delModal;
        },

        //
        addRow() {
            let obj = {};
            this.arr.push(obj);
        },
        // 添加 or 编辑
        setData(type, obj) {
            if (type === 1) {
                this.modal = true;
                this.isAdd = true;
                this.skinForm = {}
            } else {
                this.modal = true;
                this.isAdd = false;
                // this.skinForm = Object.assign({}, this.skinForm, obj)
                this.skinForm = JSON.parse(JSON.stringify(obj))
            }
        },
        getSysSkinListFn() {
            let params = {
                pageSize: this.pageSize,
                pageNum: this.pageNum,
            };
            getSysSkinList(params)
                .then(res => {
                    if (res.code == 200) {
                        this.list = res.data.list;
                        this.totalCount = res.data.total;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        pageChange(index) {
            if (this.keyword == undefined) {
                this.keyword = "";
            }
            this.pageNum = index;
            this.getSysSkinListFn();
        },
        clear() {
            this.pageNum = 1;
            this.keyword = "";
            this.list = [];
            this.getSysSkinListFn();
        },
        searchAll() {
            this.pageNum = 1;
            this.list = [];
            if (this.keyword == undefined) {
                this.keyword = "";
            }
            this.getSysSkinListFn();
        },
        bubbleSort(arr) {
            if (Array.isArray(arr)) {
                for (var i = arr.length - 1; i > 0; i--) {
                    for (var j = 0; j < i; j++) {
                        if (arr[j].machId < arr[j + 1].machId) {
                            [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
                        }
                    }
                }
                return arr;
            }
        },

        /* 新增/编辑皮肤配置 */
        submitAll() {
            this.$refs.skinForm.validate((valid) => {
                if (valid) {
                    let params = {
                        company: this.skinForm.company,
                        ext1: this.skinForm.ext1,
                        name: this.skinForm.name,
                        titleLogo: this.skinForm.titleLogo,
                        style: this.skinForm.style,
                    }
                    let getSysSkinFn = null;
                    if (this.isAdd) {
                        getSysSkinFn = getSysSkinAdd
                    } else {
                        params.skinId = this.skinForm.skinId;
                        getSysSkinFn = getSysSkinEdit
                    }
                    getSysSkinFn(params).then(res => {
                        if (res.code == 200) {
                            this.$Message.success(this.isAdd ? '添加成功' : '编辑成功');
                            if (this.isAdd) {
                                this.pageNum = 1;
                            }
                            this.getSysSkinListFn()
                            this.modal = false;
                        } else {
                            this.$Message.warning(res.msg)
                        }
                    })
                    .catch(error => console.log(error))
                } 
            })
        },

        /* 关闭弹窗 */
        close(type) {
            this.modal = false;
            this.skinForm = {}
        }
    },
    mounted() {
        this.deptId = this.$store.state.porjectObject.deptId;
        this.deptName = this.$store.state.porjectObject.name;
        this.getSysSkinListFn();
        this.getDeptList()
    },
    filters:{
        deptNameFilter(val, list){
            let name = ""
            list.forEach(element => {
                if(element.id==val){
                    name = element.name
                }
            })
            return name
        }
    }
};
</script>
<style lang="scss" scoped>
@import "./../../assets/style/themeBase.less";
@import "./../../assets/style/modal.less";

/deep/ .ivu-input {
    height: 40px;
    line-height: 40px;
    border: none;
    background-color: #F8F7F9 !important;
}

/deep/ .ivu-input-word-count {
    background: transparent;
}

.mainContent {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: #f5f5f5;
    .search {
        padding: 20px;
        border-radius: 10px;
        background: #fff;
    }
    .tabBox {
        width: 100%;
        height: calc(100% - 86px);
        padding: 20px;
        margin-top: 10px;
        box-sizing: border-box;
        background-color: #fff;
        border-radius: 10px;
        .tableList {
            /deep/ .el-table {
                color: #181818;
                font-family: MicrosoftYaHei;
                font-size: 14px;
                td,
                th.is-leaf {
                    border-bottom: none;
                }
                tr {
                    border: none;
                }
            }
            /deep/ .el-table__row {
                background-color: #fff;
                cursor: pointer;
            }
            /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
                background-color: #F3F6FD;
                cursor: pointer;
            }
        }
    }
}

.addMsg {
    .title{
        margin-bottom: 20px;
    }
    .item_close {
        position: absolute;
        left: 60px;
        top: -10px;
        cursor: pointer;
    }

    .avatar-uploader{
        position: relative;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #D2D2D2;
        width: 80px;
        height: 80px;
        line-height: 80px;
        text-align: center;
        background-color: #EEEEEE !important;
    }

    .avatar {
        width: 80px;
        height: 80px;
        display: block;
    }
}
</style>


